<template>
  <div class="page-container">
    <!-- 固定头部 -->
    <header class="header">
      <div class="header-content">
        <!-- 左侧logo -->
        <div class="logo" @click="toIndex()">
          <img
            class="image_top"
            referrerpolicy="no-referrer"
            src="./assets/img/top.png"
          />
        </div>

        <!-- 右侧按钮 -->
        <div class="header-actions">
          <el-button class="login_btn1 my_btn" @click="toAccount" v-if="name != null && name != ''">My Account</el-button>
          <el-button class="login_btn my_btn" @click="tologin" v-if="name == null || name == ''">Login</el-button>
          <el-button class="postads_btn" @click="postAds">Post&nbsp;Ads</el-button>
          <el-button class="postads_btn" @click="toBackend" v-if="name == 'admin'">Backend</el-button>
        </div>
      </div>
    </header>

    <!-- 可滚动内容区域 -->
    <main class="main-content">
      <div class="content">
        <!--   查询条件   -->
        <div class="box_1 flex-row">
          <el-select v-model="category" class="search1" placeholder="Please Select">
            <el-option v-for="category in categorys" :label="category.name" :value="category.id" :key="category.id" />
          </el-select>
          <!--        <el-input class="search1" v-model="city" placeholder="City name"></el-input>-->
          <el-select
            class="search1"
            v-model="city"
            filterable
            remote
            reserve-keyword
            placeholder="City name"
            :remote-method="remoteMethod"
            :loading="loading">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input class="search1" v-model="query" placeholder="Enter query"></el-input>

          <el-button class="search2" style="margin-left: auto;margin-right: 5px;" @click="toSearch">Search</el-button>
        </div>

        <!-- 这里放置你的页面主要内容 -->
        <div class="row-class">
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/1.png" class="zhou-flag"></span>
                <span @click="toCity(0)">{{states[0].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/18.png" class="zhou-flag"></span>
                <span @click="toCity(17)">{{states[17].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/35.png" class="zhou-flag"></span>
                <span @click="toCity(34)">{{states[34].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/2.png" class="zhou-flag"></span>
                <span @click="toCity(1)">{{states[1].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/19.png" class="zhou-flag"></span>
                <span @click="toCity(18)">{{states[18].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/36.png" class="zhou-flag"></span>
                <span @click="toCity(35)">{{states[35].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/3.png" class="zhou-flag"></span>
                <span @click="toCity(2)">{{states[2].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/20.png" class="zhou-flag"></span>
                <span @click="toCity(19)">{{states[19].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/37.png" class="zhou-flag"></span>
                <span @click="toCity(36)">{{states[36].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/4.png" class="zhou-flag"></span>
                <span @click="toCity(3)">{{states[3].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/21.png" class="zhou-flag"></span>
                <span @click="toCity(20)">{{states[20].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/38.png" class="zhou-flag"></span>
                <span @click="toCity(37)">{{states[37].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/5.png" class="zhou-flag"></span>
                <span @click="toCity(4)">{{states[4].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/22.png" class="zhou-flag"></span>
                <span @click="toCity(21)">{{states[21].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/39.png" class="zhou-flag"></span>
                <span @click="toCity(38)">{{states[38].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/6.png" class="zhou-flag"></span>
                <span @click="toCity(5)">{{states[5].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/23.png" class="zhou-flag"></span>
                <span @click="toCity(22)">{{states[22].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/40.png" class="zhou-flag"></span>
                <span @click="toCity(39)">{{states[39].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/7.png" class="zhou-flag"></span>
                <span @click="toCity(6)">{{states[6].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/24.png" class="zhou-flag"></span>
                <span @click="toCity(23)">{{states[23].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/41.png" class="zhou-flag"></span>
                <span @click="toCity(40)">{{states[40].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/8.png" class="zhou-flag"></span>
                <span @click="toCity(7)">{{states[7].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/25.png" class="zhou-flag"></span>
                <span @click="toCity(24)">{{states[24].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/42.png" class="zhou-flag"></span>
                <span @click="toCity(41)">{{states[41].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/9.png" class="zhou-flag"></span>
                <span @click="toCity(8)">{{states[8].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/26.png" class="zhou-flag"></span>
                <span @click="toCity(25)">{{states[25].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/43.png" class="zhou-flag"></span>
                <span @click="toCity(42)">{{states[42].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/10.png" class="zhou-flag"></span>
                <span @click="toCity(9)">{{states[9].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/27.png" class="zhou-flag"></span>
                <span @click="toCity(26)">{{states[26].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/44.png" class="zhou-flag"></span>
                <span @click="toCity(43)">{{states[43].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/11.png" class="zhou-flag"></span>
                <span @click="toCity(10)">{{states[10].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/28.png" class="zhou-flag"></span>
                <span @click="toCity(27)">{{states[27].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/45.png" class="zhou-flag"></span>
                <span @click="toCity(44)">{{states[44].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/12.png" class="zhou-flag"></span>
                <span @click="toCity(11)">{{states[11].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/29.png" class="zhou-flag"></span>
                <span @click="toCity(28)">{{states[28].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/46.png" class="zhou-flag"></span>
                <span @click="toCity(45)">{{states[45].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/13.png" class="zhou-flag"></span>
                <span @click="toCity(12)">{{states[12].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/30.png" class="zhou-flag"></span>
                <span @click="toCity(29)">{{states[29].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/47.png" class="zhou-flag"></span>
                <span @click="toCity(46)">{{states[46].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/14.png" class="zhou-flag"></span>
                <span @click="toCity(13)">{{states[13].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/31.png" class="zhou-flag"></span>
                <span @click="toCity(30)">{{states[30].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/48.png" class="zhou-flag"></span>
                <span @click="toCity(47)">{{states[47].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/15.png" class="zhou-flag"></span>
                <span @click="toCity(14)">{{states[14].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/32.png" class="zhou-flag"></span>
                <span @click="toCity(31)">{{states[31].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/49.png" class="zhou-flag"></span>
                <span @click="toCity(48)">{{states[48].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/16.png" class="zhou-flag"></span>
                <span @click="toCity(15)">{{states[15].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/33.png" class="zhou-flag"></span>
                <span @click="toCity(32)">{{states[32].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/50.png" class="zhou-flag"></span>
                <span @click="toCity(49)">{{states[49].name}}</span>
              </div>
            </el-col>
          </el-row>
          <el-row class="row-class2">
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/17.png" class="zhou-flag"></span>
                <span @click="toCity(16)">{{states[16].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/34.png" class="zhou-flag"></span>
                <span @click="toCity(33)">{{states[33].name}}</span>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <span><img src="../cms/assets/img/51.png" class="zhou-flag"></span>
                <span @click="toCity(50)">{{states[50].name}}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </main>

    <!-- 固定底部 -->
    <footer class="footer">
      <div class="footer1">Terms｜About&nbsp;us｜Contact&nbsp;us｜Privacy</div>
      <div class="footer1">Email:topgirlspage88@gmail.com</div>
      <hr>
      <div class="footer1">Copyright&nbsp;©&nbsp;2025&nbsp;topgirlspage.com&nbsp;All&nbsp;Rights&nbsp;Reserved</div>
    </footer>

    <!--  弹窗提示  -->
    <el-dialog title="Publisth ad rules" :visible.sync="outerVisible">
      Before the topgirlspage.com writes the advertisement
      You agree to follow these rules:
      <br>
      1.All posters must be of legal age.
      <br>
      2.You may not post any content or information of anyone that is not of legal age.
      <br>
      3.You may not mention or infer that any person advertised is of less than legal age. Words like "young", "school girl-like" or similar may not be used.
      <br>
      4.You may not post images or personal information of another person without consent.
      <br>
      5.It is forbidden to publish any pictures and words involving nudity, genitalia, violence, drugs, guns, child trafficking and women. Once found, the account will be deleted and IP login will be permanently closed
      <div slot="footer" class="dialog-footer">
        <el-button class="cancel_btn" @click="outerVisible = false">Cancle</el-button>
        <el-button class="ok_btn" type="primary" @click="toPublish">I Agree</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { cmsCity, getCityAndZhou } from "@/api/cms/city";

export default {
  data() {
    return {
      options: [],
      value: [],
      list: [],
      loading: false,
      category: '',
      city: '',
      query: '',
      province: [],
      states:[{
        "name": "Alabama"
      }, {
        "name": "Alaska"
      }, {
        "name": "Arizona"
      }, {
        "name": "Arkansas"
      }, {
        "name": "California"
      }, {
        "name": "Colorado"
      }, {
        "name": "Connecticut"
      }, {
        "name": "Delaware"
      }, {
        "name": "District of Columbia"
      }, {
        "name": "Florida"
      }, {
        "name": "Georgia"
      }, {
        "name": "Hawaii"
      }, {
        "name": "Idaho"
      }, {
        "name": "Illinois"
      }, {
        "name": "Indiana"
      }, {
        "name": "Iowa"
      }, {
        "name": "Kansas"
      }, {
        "name": "Kentucky"
      }, {
        "name": "Louisiana"
      }, {
        "name": "Maine"
      }, {
        "name": "Maryland"
      }, {
        "name": "Massachusetts"
      }, {
        "name": "Michigan"
      }, {
        "name": "Minnesota"
      }, {
        "name": "Mississippi"
      }, {
        "name": "Missouri"
      }, {
        "name": "Montana"
      }, {
        "name": "Nebraska"
      }, {
        "name": "Nevada"
      }, {
        "name": "New Hampshire"
      }, {
        "name": "New Jersey"
      }, {
        "name": "New Mexico"
      }, {
        "name": "New York"
      }, {
        "name": "North Carolina"
      }, {
        "name": "North Dakota"
      }, {
        "name": "Ohio"
      }, {
        "name": "Oklahoma"
      }, {
        "name": "Oregon"
      }, {
        "name": "Pennsylvania"
      }, {
        "name": "Rhode Island"
      }, {
        "name": "South Carolina"
      }, {
        "name": "South Dakota"
      }, {
        "name": "Tennessee"
      }, {
        "name": "Texas"
      }, {
        "name": "Utah"
      }, {
        "name": "Vermont"
      }, {
        "name": "Virginia"
      }, {
        "name": "Washington"
      }, {
        "name": "West Virginia"
      }, {
        "name": "Wisconsin"
      }, {
        "name": "Wyoming"
      }],
      categorys: [{
        id: 2,
        name: 'Bodyrubs'
      },{
        id: 3,
        name: 'Escorts'
      },{
        id: 4,
        name: 'All'
      }],
      outerVisible: false,
    };
  },
  methods: {
    toIndex() {
      this.$router.push({
        path: "/cms/main/cmsIndex"
      });
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    toCity(index) {
      console.log(this.states[index].name)
      this.$router.push({
        path: "/cmsIndex2?zhou=" + this.states[index].name
      });
    },
    handleCityClick(city) {
      console.log('Selected City:', city);
    },
    toSearch() {
      console.log('搜索条件',this.category, this.city, this.query);
      this.$router.push({
        path: "/list?category=" + this.category + "&city=" + this.city + "&query=" + this.query
      });
    },
    postAds() {
      this.outerVisible = true
    },
    toPublish() {
      this.$router.push({
        path: "/cmsPublish"
      });
    },
    tologin() {
      this.$router.push({
        path: "/cmsLogin"
      });
    },
    toAccount() {
      this.$router.push({
        path: "/cmsAcount"
      });
    },
    toBackend() {
      this.$router.push({
        path: "/index"
      });
    },
    cmsCity() {
      cmsCity().then(res => {
        this.province = res.data
        console.log('data:',this.province)
      });
    },
    getCityAndZhou() {
      getCityAndZhou().then(res => {
        this.list = res.data.map(item => {
          return { value: `${item.zhouName}`, label: `${item.zhouName}` };
        })
      });
    }
  },
  created() {
    this.cmsCity()
    this.getCityAndZhou()
  },
  computed: {
    ...mapGetters([
      'avatar',
      'name'
    ]),
  },
}
</script>

<style scoped>
/* 重置默认边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* 头部样式 */
.header {
  height: 60px;
  background-color: white;
  color: white;
  padding: 0 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.image_top {
  width: 252px;
  height: 52px;
  margin: 8px 0 0 240px;
}

.header-actions {
  display: flex;
  gap: 5px;
}

.my_btn {
  height: 40px;
  background: linear-gradient( #FF3A90 0%, #C6044B 100%);
  border-radius: 6px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 24px;
  text-align: center;
  font-style: normal;
  margin: 8px 0 0 calc(100vw - 1200px);
}

.login_btn {
  width: 84px;
}

.login_btn1 {
  width: 140px;
}

.login_btn2 {
  width: 4px;
}

.postads_btn {
  width: 105px;
  height: 40px;
  background: #2D1B0B;
  border-radius: 6px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 16px;
  color: #FBD798;
  line-height: 24px;
  text-align: center;
  font-style: normal;
  margin: 8px 0 0 8px;
}

/* 中间内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background-color: #FFF6F9;
}

.content {
  max-width: 1200px;
  margin: 0 auto;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.row-class {
  margin-top: 40px;
}

.row-class2 {
  height: 40px;
}

.box_1 {
  max-width: 1200px;
  height: 52px;
  /*background: url(https://lanhu-oss-2537-2.lanhuapp.com/SketchPngf5d0297da7e4a7c3d534b43a2ea85fa403a16d5a578c427828027844f7782e13) 100% no-repeat;*/
  background: url(../cms/assets/img/search_bg.png) 100% no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  justify-content: flex-start;
}

.box_2 {
  max-width: 1200px;
  height: 14px;
  font-size: 14px;
  margin: 10px 0px;
}

.thumbnail_2 {
  padding-right: 5px;
}

.search1 {
  /*width: 200px;*/
  width: calc(33vw - 40px);
  margin: auto 5px;
}

.search2 {
  width: 120px;
  /*width: 20%;*/
  height: 40px;
  text-align: center;
  margin: auto;
  color: #E81566;
  float: right;
}

.zhou-flag {
  margin-right: 12px;
  width: 28px;
  height: 20px;
}

/* 底部样式 */
.footer {
  height: 65px;
  background-color: #E81566;
  color: white;
  align-items: center;
  justify-content: center;
}

.footer1 {
  text-align: center;
  color: white;
  font-size: 14px;
  margin: 3px 0 0 0;
}

.cancel_btn {
  width: 100px;
  height: 40px;
}

.ok_btn {
  width: 100px;
  height: 40px;
}
</style>
